const path = require("path")
const webpack = require("webpack")
const  htmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
  entry:path.join(__dirname,"./src/main.js"),
  output:{
    path:path.join(__dirname,"./dist"),
    filename:"bundle.js"
  },
  devServer:{
    open: true,//自动打开浏览器
    port: 3000,//设置启动时候的运行端口
    contentBase: 'src',//指定托管的根目录
    hot: true//启用热更新
  },
  plugins: [//配置插件的节点
    new webpack.HotModuleReplacementPlugin(),//new 一个热更新的模块对象这是启用热更新
    new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
      template: path.join(__dirname,"./src/index.html"),//指定模块页面,将来会根据指定的页面路径,去生成内存中的页面
      filename: 'index.html'//指定生成的页面名称
    })
  ],
  module:{//这个节点,用于配置所有第三方模块加载器
    rules:[//所有第三方的匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader']},//配置处理.css文件的第三方loader规则
      { test:/\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},//配置处理.less文件的第三方loader规则
      { test: /\.scss$/,use: ['style-loader','css-loader','sass-loader']},//配置处理.scss文件的第三方loader规则
      //limit给定的值是图片的大小,单位是byte,如果大于等于limit则不会被转为base64的字符串,否则,会被转为base64位字符串
      // { test:/\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=196&&name=[hash:8]-[name].[ext]'}//处理图片路径的loader
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=210100' },
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'},//处理字体文件的loader
      { test:/\.js$/,use: 'babel-loader',exclude: /node_modules/},//配置Babel来转换高级的ES语法
      { test:/\.vue$/,use: 'vue-loader'}//处理.vue文件的loader


    ]

  }


}